<template>
  <div class="common-layout">
    <el-container ref="maxdiv" :style="{ height: lihe }">
      <el-header class="zuida" style="background-color: #adcffc">
        <div
          style="
            font-size: 20px;
            font-weight: bold;
            margin-left: 100px;
            margin-top: 10px;
          "
        >
          小七刷课系统
        </div>
        <div class="user">
          {{ username }}同学您好
          <el-button style="margin-right: 80px" @click="tuichu()" type="success"
            >退出登录</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside style="background: #adcffc" width="200px">
          <!-- 下拉菜单 -->
          <!-- <ul style="width: 100%;list-style: none;padding: 0;">
            <li style="height: 40px;font-size: 20px;font-weight: bold;text-align: center;line-height: 40px;color: #fff;">选择课程</li>
            <li class="tongyi" v-for="(item,index) in listdata" :key="index">{{item.courseName}}</li>
          </ul> -->
          <el-form-item label="" prop="busType">
            <el-select v-model="busType" placeholder="课程选择">
              <el-option
                v-for="(item, index) in bus_type"
                :value="item.courseName"
                :label="item.courseName"
                @click="clickLi(index)"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-aside>
        <el-main style="padding-top: 1px; overflow: hidden;">
          <el-form-item
            label=""
            prop="userType"
            style="margin-left: 100px; margin-top: 10px"
          >
            <el-select v-model="userType" placeholder="章节选择">
              <el-option
                v-for="(item, index) in user_type"
                :value="item.directoryName"
                :label="item.directoryName"
                @click="shuake(index)"
                :key="index"
              >
              </el-option>
            </el-select>

            <el-form-item
            label=""
            prop="xiaoType"
            style="margin-left: 10px;"
          >
            <el-select v-model="xiaoType" placeholder="小节选择">
              <el-option
                v-for="(item, index) in xiao_type"
                :value="item.directoryName"
                :label="item.directoryName"
                @click="xiaojie(index)"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>


            <el-button style="margin-left: 20px" @click="liji()" type="warning"
              >选择刷课</el-button
            >



          </el-form-item>

         

          <!-- 播放音乐 -->
          <div class="yingyue">
            <div class="yingyue_left">
              <div class="go" ref="weiid">
                <img
                  style="width: 100%; height: 100%; border-radius: 50%"
                  :src="video_Img"
                  alt=""
                />
              </div>
            </div>

            <div class="yingyue_right">
              <div class="right_top">
                <div
                  style="font-weight: bold; font-size: 18px; margin-top: 10px"
                >
                  歌手：{{ artistsname }}
                </div>
                <div style="margin-top: 5px">歌名：{{ SongTitle }}</div>
              </div>
              <div class="right_bottom">
                <div class="bottom_list">
                  <img
                    @click="shagnyishou()"
                    style="width: 70%; margin-top: 30px; margin-left: 25%"
                    src="../assets/上一首.png"
                    alt=""
                  />
                </div>
                <div class="bottom_list">
                  <img
                    @click="bofang()"
                    v-if="!playing"
                    style="width: 70%; margin-top: 30px; margin-left: 25%"
                    src="../assets/播放2.png"
                    alt=""
                  />
                  <img
                    @click="zanting()"
                    v-if="playing"
                    style="width: 70%; margin-top: 30px; margin-left: 25%"
                    src="../assets/暂停按钮.png"
                    alt=""
                  />
                </div>
                <div class="bottom_list">
                  <img
                    @click="xiayi()"
                    style="width: 70%; margin-top: 30px; margin-left: 25%"
                    src="../assets/下一首.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 结束 -->
          <div class="beij"></div>
        </el-main>
      </el-container>
    </el-container>
    <audio
      ref="audio"
      @play="play"
      :src="audio_zi"
      @ended="end"
      controls
      autoplay="autoplay"
      :hidden="true"
    ></audio>
  </div>
</template>


<script>
import { ElMessage, ElLoading } from "element-plus";
import { floatingPanelProps } from "vant";
import md5 from "md5";
import axios from "axios";
import { getDetails, chapter, getProduct, login } from "../uitils/products.js";
import router from "@/router/index.js";

export default {
  data() {
    return {
      lihe: 923,
      // 你的选项数据
      busType: "",
      bus_type: [],
      //章节选择
      userType: "",
      user_type: [],
      //小节选择
      xiaoType:"",
      xiao_type:[],
      skip_school: [], //四个小章节
      username: "",
      // retrieval: [],
      //播放器数据
      video_Img: "",
      audio_zi: "",
      artistsname: "",
      SongTitle: "",
      playing: false,
      rotate: false,
      audio_list: [],
      timerId:null
    };
  },
  methods: {
    // 下拉列表遍历
    fangfa() {
      var that = this;
      //查看相关课程
      getDetails()
        .then((res) => {
          that.bus_type = res.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看相关章节
    clickLi(index) {
      console.log(index);
      var that = this;
      chapter(this.bus_type[index].courseId)
        .then((res) => {
          console.log(res);
          that.user_type = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
   //章节
    shuake(index) {
      // this.skip_school = this.user_type[index].children;
      this.xiao_type=this.user_type[index].children
    },
     //小章节
     xiaojie(index){
      this.skip_school = this.xiao_type[index]
      // console.log(this.skip_school);
    },
    //立即刷课
    liji() {
      var that=this
      //判断课程是否选中
      let flg = this.bus_type.some((item) => {
        return item.courseName == this.busType;
      });
      if (!flg) {
        ElMessage({
          message: "请选择课程",
          type: "error",
          duration: 3000,
        });
        return;
      }
      //判断章节是否选中
      let flgs = this.user_type.some((item) => {
        return item.directoryName == this.userType;
      });
      if (!flgs) {
        ElMessage({
          message: "请选择章节",
          type: "error",
          duration: 3000,
        });
        return;
      }

            //判断小章节是否选中
            let flgsy = this.xiao_type.some((item) => {
        return item.directoryName == this.xiaoType;
      });
      if (!flgsy) {
        ElMessage({
          message: "请选择小节",
          type: "error",
          duration: 3000,
        });
        return;
      }

      getProduct()
        .then((res) => {
          if (res.code != 401) {
            console.log(this.skip_school);

            this.ceshi(
                this.skip_school.videoId.substr(0, 10),
                this.skip_school.videoId,
                this.skip_school.videoDuration
              );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //自己名字转换为base64
    encode64(text) {
      return btoa(String.fromCharCode(...new TextEncoder().encode(text)));
    },
    //刷课
    ceshi(uid, videoId, videoDuration) {
      var that = this;
      const e = (e, t, s, a, o, i) => q()(e + t + s + a + o + i),
        t = (e) => btoa(e).slice(0, 7),
        s = () => new Date().getTime(),
        a = s(),
        o = s() + "X" + Math.floor(1e6 * Math.random() + 1e6),
        i = String(this.encode64(localStorage.getItem("username"))).replace(
          "+",
          "-"
        ),
        n = videoId,
        r = t(localStorage.getItem("userid"));
      var sha1_1 =
        "rtas.net" + `${o}` + `${n}` + 0 + videoDuration + videoDuration;
      var hashCode = md5(sha1_1);
      axios({
        url: `https://prtas.videocc.net/v2/view?pid=${o}&vid=${videoId}&uid=${uid}&flow=0&ts=${a}&href=aHR0cDovL21vb3QubWh5cy5jb20uY24vIy9jb3Vyc2VQbGF5P2RpcmVjdG9yeUlkPTc5OCZjb3Vyc2VJZD0yMw&duration=${videoDuration}&cts=${videoDuration}&sign=${hashCode}&sd=${videoDuration}&pd=${videoDuration}&pn=HTML5&pv=v1.41.0&sid=${r}&param2=${i}&cataid=1563327285070`,
        headers: {
          Accept: "application/json, text/plain, */*",
        },
      })
        .then((response) => {
          if(response.status==200){
            ElMessage({
                message: "刷课成功，请大概20分钟左右查看",
                type: "success",
                duration: 3000,
              });
              this.xiaoType = "";
          }else{
            ElMessage({
                message: "刷课失败，请重试",
                type: "error",
                duration: 3000,
              });
          }
        })
        .catch((error) =>{
          ElMessage({
                message: "刷课失败，请联系管理员",
                type: "error",
                duration: 3000,
              });
          console.error(error)
        });
    },
    //退出登录
    tuichu() {
      this.$confirm("是否确认退出登录", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
        closeOnPressEscape: false, //按下 ESC 键关闭弹窗
        closeOnClickModal: false, //点击遮罩关闭弹窗
        distinguishCancelAndClose: true, //区分取消与关闭
      })
        .then(() => {
          let time = 3;
          //确认回调
          localStorage.removeItem("username");
          localStorage.removeItem("className");
          localStorage.removeItem("token");
          localStorage.removeItem("userid");
          const loading = ElLoading.service({
            lock: true,
            text: `${time}秒后跳转`,
            background: "rgba(0, 0, 0, 0.7)",
          });
          setTimeout(() => {
            loading.close();
            router.push("./pc_index");
          }, 3000);
        })
        .catch((action) => {
          //取消按钮及右上角的关闭按钮回调
          //在catch方法的回调参数中传递action，判断action的值为 cancel 还是 close，如果是close，就代表操作为点击右上角按钮，为 cancel，就是点击的取消按钮
          if (action === "cancel") {
            //驳回
          } else {
            //关闭弹窗
            return;
          }
        });
    },
    //音乐简易逻辑
    play() {
      this.$refs.weiid.style = "animation-play-state:running;";
      this.playing = true;
    },
    //播放音乐
    bofang() {
      const audioElem = this.$refs.audio;
      audioElem.play();
      this.$refs.weiid.style = "animation-play-state:running;";
      this.playing = true;
    },
    zanting() {
      const audioElem = this.$refs.audio;
      audioElem.pause();
      this.$refs.weiid.style = "animation-play-state:paused;";
      this.playing = false;
    },
    //上一首
    shagnyishou() {
      const audio_name = this.audio_list.url.split("=");
      const audio_er = this.audio_zi.split("=");
      if (audio_name[1] != audio_er[1]) {
        this.video_Img = this.audio_list.picurl;
        this.audio_zi = this.audio_list.url;
        this.artistsname = this.audio_list.artistsname;
        this.SongTitle = this.audio_list.name;
        this.$refs.weiid.style =
          "transform: rotate(0deg);animation-play-state:running;";
        this.$nextTick((res) => {
          const { audio } = this.$refs;
          audio.load();
          audio.play();
        });
      } else {
        axios({
          method: "GET",
          url: `https://api.qqsuu.cn/api/dm-randmusic?sort=飙升榜&format=json`,
        })
          .then((res) => {
            this.video_Img = res.data.data.picurl;
            this.audio_zi = res.data.data.url;
            this.artistsname = res.data.data.artistsname;
            this.SongTitle = res.data.data.name;
            this.$refs.weiid.style =
              "transform: rotate(0deg);animation-play-state:running;";
            this.$nextTick((res) => {
              const { audio } = this.$refs;
              audio.load();
              audio.play();
            });
          })
          .catch((error) => console.error(error));
      }
    },
    //下一首
    xiayi() {
      axios({
        method: "GET",
        url: `https://api.qqsuu.cn/api/dm-randmusic?sort=飙升榜&format=json`,
      })
        .then((res) => {
          this.video_Img = res.data.data.picurl;
          this.audio_zi = res.data.data.url;
          this.audio_list = res.data.data;
          this.artistsname = res.data.data.artistsname;
          this.SongTitle = res.data.data.name;
          this.playing = true;
          this.$refs.weiid.style =
            "transform: rotate(0deg);animation-play-state:running;";
          this.$nextTick((res) => {
            const { audio } = this.$refs;
            audio.load();
            audio.play();
          });
        })
        .catch((error) => console.error(error));
    },
    end() {
      this.xiayi();
    },
    //结束
  },
  mounted() {
    this.$nextTick(() => {
      this.lihe = window.innerHeight + "px";
    });
    this.fangfa();
    this.username = localStorage.getItem("username");
    //一进入就播放音乐

    axios({
      method: "GET",
      url: `https://api.qqsuu.cn/api/dm-randmusic?sort=飙升榜&format=json`,
    })
      .then((res) => {
        this.video_Img = res.data.data.picurl;
        this.audio_zi = res.data.data.url;
        this.audio_list = res.data.data;
        this.artistsname = res.data.data.artistsname;
        this.SongTitle = res.data.data.name;
      })
      .catch((error) => console.error(error));
    // 结束
  },
};
</script>

<style  scoped>
.beij {
  width: 50%;
  height: 80%;
  background-image: url(../assets/小新宝宝照片.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px auto;
  background-position: center center;
}
.zuida {
  display: flex;
  justify-content: space-between;
}
.user {
  font-weight: bold;
  line-height: 60px;
}
/* 音乐样式 */

.yingyue {
  width: 400px;
  height: 160px;
  border-radius: 20px;
  position: fixed;
  left: 210px;
  top: 600px;
  display: flex;
  /* border: 1px solid aqua; */
  box-shadow: 2px 2px 5px #888888, -2px -2px 5px #888888;
}
/* 音乐旋转 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.go {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  margin: 10% auto;
  transform: rotate(45deg);
  animation: rotate 10s linear paused infinite;
}
/* 结束 */
.yingyue_left {
  width: 40%;
  height: 100%;
  border-radius: 20px 0px 0px 20px;
}

.yingyue_right {
  flex: 1;
}
.right_top {
  width: 100%;
  height: 40%;
  border-radius: 0px 20px 0px 0px;
  padding-top: 1px;
}
.right_bottom {
  width: 100%;
  height: 60%;
  border-radius: 0px 0px 20px 0px;
  display: flex;
}
.bottom_list {
  width: 25%;
  height: 100%;
}
/* 结束 */
.common-layout{
  width: 1920px;
}
@media all and (min-width: 1920px) {
  .bgimg{
    width: 100%;
  }
}
</style>